<template>
  <div class="searchUser">
    <div class="title">用户</div>

    <ul>
      <li class="clearFix user" v-for="item in searchCustomer" @click="gotoAddress({path:'/otherIndex?id='+item.customer_id})">
        <img class="icon fl" :src="'http://api.piver.cn/image/users/'+item.customer_id+'.jpg'"/>
        <p class="name fl">{{item.name}}</p>
      </li>

      <!--<li class="clearFix user">-->
              <!--<img class="icon fl" src="https://dummyimage.com/30x30"/>-->
              <!--<p class="name fl">用户名2</p>-->
      <!--</li>-->
    </ul>
    <div class="next-btn" v-if="showMore">
      <mt-button type="danger" size="large" @click="addMoreGoods">加载更多</mt-button>
    </div>
		<!--<div class="next-btn" v-if="!haveDate">-->
      <!--<mt-button type="danger" size="large" disabled>无更多用户</mt-button>-->
    <!--</div>-->
    <div class="no-result" v-if="!haveList" style="display: none">
      <div class="no">
        <img src="../../assets/search/a5.png" alt="" />
      </div>
      <div class="no-text">没有相关信息</div>
    </div>


  </div>
</template>

<script>
  import {Toast} from 'mint-ui'


  export default {
  name: 'SearchUser',
  data () {
    return {
      haveList:false,
      searchCustomer:[],
      curPage:1,
      haveDate:true,
      showMore:false
    }
  },
  mounted:function() {
    this.initData(this.curPage)
  },
  methods: {
  	addMoreGoods(){
  		this.curPage++
  		this.initData(this.curPage)

  	},
    initData:function(curPage){
      //alert(this.$route.query.keyword);
      var _this = this;
      //hotSearch
      var ajaxData = {};
      ajaxData.keyword = this.$route.query.keyword;
      ajaxData.type = this.$route.query.type;
      ajaxData.page = curPage;
      $.ajax({
        type:'post',
        url: RouteMap.searchArticle,
        data:ajaxData,
        success:function(res){
          if(res.code == 200){

            if(curPage < res.data.maxpage){
              _this.showMore = true;
            }

            if(res.data.list.length==0 || curPage == res.data.maxpage){

              _this.showMore = false;
            }

            if(!utilities.isNull(res.data.list)){
          		if(curPage <= res.data.maxpage){
          			_this.haveDate = true;
          			_this.searchCustomer = _this.searchCustomer.concat(res.data.list);
          		}else{
          			_this.haveDate = false;
          		}
          	}else{
          		_this.haveDate = false;
          	}
            console.log(res.data.list);

            if(_this.searchCustomer[0]){
              _this.haveList = true;
            }
            else{
              $('.no-result').show();
            }
          }
          else{
            //Toast(res.msg)
          }
        }
      })
    },
    gotoAddress(path){
      this.$router.push(path)
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.searchUser{background:#fff;padding-top: 0.5rem;}

.user{
      width:100%;
      box-sizing:border-box;
      padding:.5rem 0 .5rem .5rem;
      border-bottom: 1px solid #eee;
}
.user .icon{
      border-radius: 50%;
      width:1.5rem;
      height:1.5rem;

}
.user .name{
      line-height:1.5rem;
      padding-left:.5rem;
}
.next-btn{
  padding: 0 0.5rem;
  padding-bottom: 2rem;
  margin-top: 1rem;
}
.title{
  border-bottom: 1px solid #eee;
  padding: 0.4rem 0.5rem;
  font-size:.65rem;
  color: #b01f24;
}

</style>
